<template>
  <footer class="editor-footer">
    <div class="editor-footer-content">
      <slot>
        <Character />
        <Zoom />
        <Outline />
      </slot>
    </div>
  </footer>
</template>

<script setup lang="ts">
import Character from "../menus/footer/character.vue";
import Zoom from "../menus/footer/zoom.vue";
import Outline from "../menus/footer/outline.vue";

defineOptions({
  name: "EditorFooter",
});
</script>

<style scoped lang="scss">
.editor-footer {
  background-color: var(--editor-color-white);
  border-top: 1px solid var(--editor-border-color);
  flex-shrink: 0;
  z-index: 10;
}

.editor-footer-content {
  display: flex;
  align-items: center;
  min-height: 32px;
}
</style>
